<template>
    <page>
        <div class="white-bg tc">
            <p class="h44 f16 bg-main1">{{shopName}}</p>
            <div class="wrap-qr">
                <p class="f14 mt12" flex="main:justify" v-for="i in deTailList">{{i.title}} <span>数量：{{i.number}} </span></p>
                <qrcode :value="qr_code" type="img" :size="200" class="mt40"></qrcode>
            </div>
        </div>
        <div class="white-bg pl50 pt40 text line28 pb40">
            <p>订单状态: {{['未核销', '已核销'][order.state - 2]}}</p>
            <p>订单编号: {{order.orderNumber}}</p>
            <p>订单生成时间: {{order.payTime | dateFormat}}</p>
        </div>
    </page>
</template>
<script>
  import { Qrcode } from 'vux'

  export default {
    data () {
      const id = this.$route.query.id
      console.log(id)
      return {
        id,
        qr_code: '',
        deTailList: [],
        order: {}
      }
    },
    computed: {
      shopName () {
        const item = this.$g.shopList.find(x => x.id == this.order.shopId)
        return item ? item.shopName:''
      }
    },
    async created () {
      let {obj: {deTailList, order}} = await this.$get('/order/getOrder/' + this.id)
      this.deTailList = deTailList || []
      this.order = order
      console.log(order)
      this.qr_code = order.orderNumber
    },
    methods: {
      PitsPullData () {},
      PitsPushData () {}
    },
    components: {Qrcode}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .wrap-qr {
        width: 200px;
        margin: auto;
    }
</style>
